<template lang="html">
    <div class="live-push-history">
        <nav-header>
            <template slot="menuBefore">
                <li>
                    <router-link to="/resources/live/livePlay-list">直播列表</router-link>
                </li>
                <li class="gap">&gt;</li>
            </template>
        </nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width">
                        <el-date-picker type="daterange" :editable="false" :clearable="false" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" v-model="pickerDate" style="width: 100%;">
                        </el-date-picker>
                    </div>
                    <div class="open-width">
                        <el-input placeholder="直播名称" v-model="keyword" @keyup.enter.native="search"></el-input>
                    </div>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="danger" @click="delAll">批量删除</el-button>
                </div>
            </div>
            <div class="zh-table-contents" v-loading="dataLoading.status" :element-loading-text="dataLoading.txt">
                <el-table :data="listData" border @selection-change="tableSelectionChange" max-height="541" style="width: 100%">
                    <el-table-column fixed type="selection" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="live_name" label="直播名称" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="category" label="课程分类" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="teacher_name" label="主讲人" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="cl_name" label="直播教室" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="start_time" label="直播时间" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="push_time" label="推送时间" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="school_name" label="推送至" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <!--                     <el-table-column prop="" label="是否加密" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.password ? '是' : '否'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="status_txt" label="审批结果" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" prop="handle" label="操作" align="center" width="250" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="text" v-if="scope.row.status === 1" @click="removeTergger(scope.row)">撤回</el-button>
                            <el-button type="text" class="delete-button" @click="delTergger(scope.row,'one')">删除记录</el-button>
                            <!-- <el-button type="text" v-if="scope.row.status === 3" @click="checkReject(scope.row)">查看原因</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="拒绝理由" :visible.sync="rejectFlag" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
            <div class="textarea-box" v-text="rejectTxt ? rejectTxt : '暂无拒绝理由'"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectFlag = false">取 消</el-button>
                <el-button type="primary" @click="rejectFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="删除" :visible.sync="delFlag" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
            <div class="textarea-box">该直播进行中，删除该直播会导致直播结束，确认删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delFlag = false">取 消</el-button>
                <el-button type="primary" @click="delFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="批量删除" :visible.sync="delAllFlag" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
            <div class="textarea-box">该直播进行中，删除该直播会导致直播结束，确认删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delAllFlag = false">取 消</el-button>
                <el-button type="primary" @click="delAllFlag = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dataLoading: {
                status: false,
                txt: '获取数据...'
            },
            delFlag: false,
            delAllFlag: false,
            rejectFlag: false,
            rejectTxt: '',
            /*拒绝理由 */
            listData: [],
            listParam: {
                // type: 2,
                app_code: sessionStorage.getItem('CheckSchoolAppCode'),
                keyword: undefined,
                start_time: undefined,
                end_time: undefined,
                page_index: 1,
                page_size: 10,
            },
            keyword: '',
            pickerDate: [],
            total_number: 0,
            status: ['删除', '通过', '未审核', '拒绝', '移除', '撤销'],
            /*记录状态 */
            ids: [],
            rowLen: 0
        }
    },
    mounted() {},
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.dataLoading.status = true;
            let params = this.listParam;
            const success = res => {
                this.dataLoading.status = false;
                console.log(res.data.data)
                this.listData = res.data.data;
                this.total_number = res.data.data_sum;
                this.listData.forEach(item => {
                    item.statusTxt = this.status[parseInt(item.status)];
                })
            }
            this.$ajax.get('api/live/live_pushed_history', { params: params, func: { success: success } })
        },
        search() {
            this.listParam.keyword = this.keyword;
            this.listParam.start_time = this.pickerDate.length > 0 ? this.pickerDate[0] : '';
            this.listParam.end_time = this.pickerDate.length > 0 ? this.pickerDate[1] : '';
            this.listParam.page_index = 1;
            this.getList();
        },
        reset() {
            this.keyword = '';
            this.pickerDate = [];
            this.listParam = {
                type: 2,
                keyword: '',
                start_time: '',
                end_time: '',
                page_index: 1,
                page_size: 10,
            }
            this.getList();
        },
        tableSelectionChange(val) {
            this.ids = [];
            if (val.length > 0) {
                val.forEach(item => {
                    this.ids.push(item.id);
                })
            }
        },
        handleSizeChange(size) {
            this.listParam.page_size = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.listParam.page_index = page;
            this.getList();
        },
        toLink(link) {
            this.$router.push(link);
        },
        checkReject(obj) { /*查看拒绝理由 */
        console.log(obj)
            this.rejectFlag = true;
            this.rejectTxt = obj.comment;
        },
        delAll() { /*批量删除 */
            if (this.ids.length <= 0) {
                this.$message.warning('请选择要删除的选项');
                return false;
            }

            this.rowLen = this.ids.length;
            this.delTergger();
        },
        del(id) { /*删除 */
            let params = {
                type: 2,
            };

            if (id) {
                params.id = [id];
            } else {
                params.id = this.ids;
            }

            const success = res => {
                this.$message.success(res.msg);

                if (this.listData.length - this.rowLen === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index--;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.ids = [];
                this.getList();
            }

            this.$ajax.delete("api/live/live_pushed_history", {
                params: params,
                func: { success: success }
            });
        },
        delTergger(obj, type) { /*删除提示 */
            this.$confirm('确定要执行此操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (Object.is(type, 'one')) {
                    this.rowLen = 1;
                    this.del(obj.id);
                } else {
                    this.del();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        remove(id) { /*撤回 */
            let params = {
                id: id,
            }
            const success = res => {
                this.$message.success(res.msg);
                this.getList();
            }
            this.$ajax.put('api/live/live_pushed_history', params, { func: { success: success } })
        },
        removeTergger(obj) { /*撤回提示 */
            this.$confirm('确定要执行此操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.remove(obj.id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
}

</script>
